<template>
  <div :key="`data-null-item-${i}`"
       :style="`padding-top:${paddingTop}`"
       class="flex-column align-center justify-center data-null-item"
       v-for="(item,i) of Object.entries(DataNullOptions)">
    <template v-if="item[0]===type">
      <van-image class="bg-image" v-if="item[1].bg&&item[1].bg.length" :src="item[1].bg"/>
      <div :class="['remark',type]">{{ item[1].remark }}</div>
      <van-button
          type="danger"
          class="m_t25 p_x25"
          round
          size="small"
          @click="onBack(item[1])"
          v-if="item[1].routeName&&item[1].btnText&&item[1].btnText.length">
        {{ item[1].btnText }}
      </van-button>
    </template>
  </div>
</template>

<script lang="ts">
import {defineComponent} from 'vue'
import {DataNullOptions, DataNullTypes} from "@/components/dataNull/DataNullHelper";

export default defineComponent({
  name: "DataNull",
  props: {
    type: {
      type: String,
      default: DataNullTypes.default
    },
    paddingTop: {
      type: String,
      default: '2%'
    }
  },
  data() {
    return {
      DataNullTypes,
      DataNullOptions,
    }
  },
  methods: {
    onBack(data: any) {
      this.$router.push({name: data.routeName})
    }
  }
})
</script>

<style lang="less" scoped>
.data-null-item {

  .bg-image {
    width: 50%;
  }

  .remark {
    color: #9699A0;
    font-size: 14px;

    &.more {
      color: #DADADA;
    }
  }
}
</style>